<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib tagdir="/WEB-INF/tags/" prefix="ag"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Variables de redirections struts -->
<ag:urls />

<!-- Css -->
<link href="<s:url value="/assets/css/bootstrap.css"/>" rel="stylesheet"
	type="text/css">
<link href="<s:url value="/assets/css/style.css"/>" rel="stylesheet"
	type="text/css">
<link href="<s:url value="/assets/font-awesome/css/font-awesome.css"/>"
	rel="stylesheet" type="text/css">
<link href="<s:url value="/assets/css/style-responsive.css"/>"
	rel="stylesheet" type="text/css">
<link href="<s:url value="/assets/css/dev/tdbEquipe.css"/>"
	rel="stylesheet" type="text/css">

<!-- JS propre à la page -->
<script src="<s:url value="/assets/js/jquery.js"/>"></script>
<script src="<s:url value="/assets/js/agraf/visualiser/tdbEquipe.js"/>"></script>
<script src="<s:url value="/assets/js/chart-master/Chart.js"/>"></script>
<script src="<s:url value="/assets/js/chartjs-conf.js"/>"></script>

<title>Tableau de bord d'équipe</title>
</head>
<body>
	<section id="contenair"> <ag:header /> <ag:menu /> </section>

	<section id="main-content"> <section class="wrapper">
	<h3>Tableau de bord d'équipe</h3>
	<hr>
	<div class="tab-pane">
		<table id="tableContentPage">
			<tr>
				<td id="maxWidthGraph">
					<div id="graphResumePerimetre">
						<input type="hidden" value="${labelPerimetre}" id="labelPerimetre" />
						<input type="hidden" value="${chargeInitTotalToCharts}"
							id="chargeInitTotalToCharts" /> <input type="hidden"
							value="${consoTotalToCharts}" id="consoTotalToCharts" /> <input
							type="hidden" value="${rafTotalToCharts}" id="rafTotalToCharts" />
						<canvas id="bar" height="300" width="400"
							style="width: 400px; height: 300px;"></canvas>
						<div id="legendeChartsBar">
							<div>
								<div id="chargeInitSpan"></div>
								Charge initiale
							</div>
							<div>
								<div id="consommeSpan"></div>
								Consommé
							</div>
							<div>
								<div id="rafSpan"></div>
								Reste à faire
							</div>
						</div>
					</div>
				</td>
				<td>
					<div id="contentResumeParPerimetre">
						<div class="accordion">
							<s:iterator value="listePerimetre">
								<div class="accordion-section">
									<a class="accordion-section-title"
										href="#accordion-<s:property value="id" />"><s:property
											value="libelle" /> <span class="droite"><s:property
												value="etatDTO.libelle" /></span></a>

									<div id="accordion-<s:property value="id" />"
										class="accordion-section-content">

										<table class="tabPerimetre">
											<tr>
												<td><h4>Résumé :</h4>
													<div>
														Avancement :
														<s:property value="pourcentAvancement" />
														%
													</div>
													<div class="contentAvancement"
														style="width: ${largeurTauxAvancement}px;">
														<div class="divVerte"
															style="width:${pourcentAvancement / 100 * largeurTauxAvancement}px; height: 30px;"></div>
													</div>
													<div>
														Charge initiale :
														<s:property value="chargeInitTotale" />
													</div>
													<div>
														Reste à faire :
														<s:property value="rafTotal" />
													</div>
													<div>
														Consommé :
														<s:property value="consommeTotal" />
													</div>
													<div>
														Productivité :
														<s:property value="productiviteEstimee" />
														%
													</div></td>
												<td>
													<h4>Activités en cours de développement</h4>
													<table
														class="table table-striped table-advance table-hover">
														<thead>
															<tr>
																<th>Libellé</th>
																<th>Développeurs</th>
															</tr>
														</thead>
														<tbody>
															<s:iterator value="listeActiviteEnCours">
																<tr>
																	<td><s:property value="libelle" /></td>
																	<td><s:iterator value="listeUtilisateurEnCoursDev">
																			<s:property value="nom" />
																			<s:property value="prenom" />, 
															</s:iterator></td>
																</tr>
															</s:iterator>
														</tbody>
													</table>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</s:iterator>
						</div>

					</div>
				</td>
			</tr>
		</table>
	</div>
	</section> </section>

	<ag:popupNotification />
	<ag:ajoutJs />
</body>
</html>